{% load i18n %}
{% load static %}
{% get_current_language as LANGUAGE_CODE %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
    <meta charset="UTF-8">
    <title>{% trans 'Index' %}</title>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dot/2.0.0-beta.0/doT.min.js"></script>

    <script src="{% url 'javascript-catalog' %}"></script>
    <script src="{% url 'site_urls' %}"></script>
    <script src="{% static 'js/vendor/main.js' %}"></script>
    <script src="{% static 'js/vendor/jquery.preloader.min.js' %}"></script>

    <link rel="stylesheet" href="{% static 'css/basic/index.css' %}">
</head>

<body>
<div id="wrap">
    {% include 'basic/header.html' %}

    <div class="jumbotron">
        <div class="container">
            <div class="row">
                <div class="col-sm-1">

                </div>
                <div class="col-md-4">
                    <div class="self_banner_left">
                        <div class="self_contain_img">
                            <img class="self_img" src="{% static 'image/111.png' %}">
                        </div>
                        <h1>Data<br>Collect<br>Fusion</h1>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="self_banner_right">
                        <p>{% trans 'Welcome to our application.' %}</p>
                        <p>{% trans 'Based on machine learning, automatic machine learning and some material tools, the Data Collect Fusion Application provides open web-based access to computed material information as well as advanced technology to inspire and design novel materials.' %}</p>
                        <p><a class="btn btn-primary btn-lg" href="{% url 'accounts:about' %}" role="button">{% trans 'Learn more' %}</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container self_contain_carousel">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active">
              <img class="d-block w-100" src="{% static 'image/first_slide.jpg' %}" alt="First slide">
            </div>
            <div class="item">
              <img class="d-block w-100" src="{% static 'image/second_slide.jpg' %}" alt="Second slide">
            </div>
            <div class="item">
              <img class="d-block w-100" src="{% static 'image/third_slide.jpg' %}" alt="Third slide">
            </div>
            <div class="item">
              <img class="d-block w-100" src="{% static 'image/fourth_slide.jpg' %}" alt="Fourth slide">
            </div>
          </div>
          <a class="carousel-control left" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control right" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
    </div>

    <div class="container">
        <div class="row self_content_row">
            <div class="col-md-12 text-center">
    			<h2>{% trans 'Services' %}</h2>
    			<div class="self_span"></div>
    			<div class="text">{% trans 'Some services about our application' %}<br> <p></p></div>
    		    <div class="row">
                    <div class="col-md-4">
                        <div class="thumbnail">
                          <img src="{% static 'image/search.png' %}" alt="thumbnail" onclick='window.location="{% url 'search:search' %}"'>
                          <div class="caption">
                            <h3>{% trans 'Search' %}</h3>
                            <p>{% trans 'Searching the material datas.' %}</p>
                            <p><a href="{% url 'search:search' %}" class="btn btn-primary" role="button">{% trans 'Go To.' %}</a>
{#                                <a href="#" class="btn btn-default" role="button">Button</a>#}
                            </p>
                          </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                          <img src="{% static 'image/robot.jpg' %}"  alt="thumbnail" onclick='window.location="{% url 'mlplatform:index' %}"'>
                          <div class="caption">
                            <h3>{% trans 'Machine Learning' %}</h3>
                            <p>{% trans 'Creating ML tasks.' %}</p>
                            <p><a href="{% url 'mlplatform:index' %}" class="btn btn-primary" role="button">{% trans 'Go To.' %}</a>
{#                                <a href="#" class="btn btn-default" role="button">Button</a>#}
                            </p>
                          </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                          <img src="{% static 'image/analysis.png' %}" alt="thumbnail" onclick='window.location="{% url 'analysis:index' %}"'>
                          <div class="caption">
                            <h3>{% trans 'Analysis' %}</h3>
                            <p>{% trans 'Statistics about our application.' %}</p>
                            <p><a href="{% url 'analysis:index' %}" class="btn btn-primary" role="button">{% trans 'Go To.' %}</a>
{#                                <a href="#" class="btn btn-default" role="button">Button</a>#}
                            </p>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row self_content_row">
            <div class="col-md-12 text-center">
                <h2>{% trans 'Material Tools' %}</h2>
    			<div class="self_span"></div>
    			<div class="text">{% trans 'Some material tools integrated by our application.' %}<p></p></div>
    		    <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                          <img src="{% static 'image/prediction.png' %}" alt="thumbnail" onclick='window.location="{% url 'material:ppredict' %}"'>
                          <div class="caption">
                            <h3>{% trans 'Performance Prediction' %}</h3>
                            <p>{% trans 'Preciting material datas in the POSCAR format.' %}</p>
                            <p>
                                <a href="{% url 'material:ppredict' %}" class="btn btn-primary" role="button">{% trans 'Go To.' %}</a>
                            </p>
                          </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                          <img src="{% static 'image/perovskite.png' %}" alt="thumbnail" onclick='window.location="{% url 'material:perovskite' %}"'>
                          <div class="caption">
                            <h3>{% trans 'Perovskite Prediction' %}</h3>
                            <p>{% trans "Predicting Perovskite's stability." %}</p>
                            <p>
{#                                <a href="#" class="btn btn-primary" role="button">Button</a>#}
                                <a href="{% url 'material:perovskite' %}" class="btn btn-primary" role="button">{% trans 'Go To.' %}</a>
                            </p>
                          </div>
                        </div>
                    </div>
                    <div class="col-md-2"></div>
                </div>
                <div>
                    <a href="{% url 'material:all_materials' %}" class="btn btn-primary" role="button">{% trans 'See More' %}.</a>
                </div>
            </div>
        </div>
    </div>

    <footer id="index_footer">
      <div class="container">
          <div class="row">
            <div class="col-md-12 col-sm-12 text-center">
                <div class="footer_logo">
                    <a href=""><img src="{% static 'image/111_write.png' %}" alt=""></a>
                </div>
{#                <div class="footer_social">#}
{#                    <ul>#}
{#    					<li><a class="f_facebook" href="#"><i class="fa fa-facebook"></i></a></li>#}
{#    					<li><a class="f_twitter" href="#"><i class="fa fa-twitter"></i></a></li>#}
{#    					<li><a class="f_google" href="#"><i class="fa fa-google-plus"></i></a></li>#}
{#    					<li><a class="f_linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>#}
{#    					<li><a class="f_youtube" href="#"><i class="fa fa-youtube"></i></a></li>#}
{#    					<li><a class="f_skype" href="#"><i class="fa fa-skype"></i></a></li>#}
{#    				</ul>#}
{#                </div>#}
                <div class="copyright">
                    <samp class="text-muted">Powered by <a href="https://www.djangoproject.com/">Django.</a>Copyright &copy; 2017. All rights reserved.</samp>
                </div>
            </div>
          </div>
      </div>
    </footer>
</div>
</body>
</html>
